<template>
	<div class="xh-table-cont">
		<flexbox class="xh-tools">
			<div class="add-btn" size="mini" circle @click="handleAddGroup">
				<i class="el-icon-plus"></i>
			</div>
			<!-- <el-button v-if="headTools.delete" type="text" @click="handleDeleteRow"
				>删除所选行</el-button
			> -->
		</flexbox>
		<!-- <el-table
			highlight-current-row
			border
			fit
			v-loading="loading"
			:data="dataValue"
			max-height="370"
			style="width: 100%"
			@selection-change="handleSelectionChange"
			class="xh-table"
		>
			<el-table-column type="selection" v-if="headTools" width="40" />
			<el-table-column v-for="field in fields" :key="field.key">
				<template slot="header" slot-scope="scope">
					<div class="x-smoll-table__lb-i" :class="getHeaderClass(field)">
						{{ field.data.name }}
					</div>
				</template>
				<template slot-scope="scope">
					<XhElement
						:type="field.data.formType"
						:item="field"
						:value="scope.row[field.key]"
						:radio="item.radio"
						:disabled="field.disabled"
						:allow-create="item.allowCreate"
						:filterable="item.filterable"
						:multiple="item.multiple"
						:action="action"
						:crm-type="crmType"
						:class="{
							errorTd: errorTd.find(
								(err) => err.row == scope.row && err.field == field
							)
						}"
						@value-change="handleValueChange(scope, field, arguments)"
					/>
				</template>
			</el-table-column>
		</el-table> -->
		<div
			style="
				position: relative;
				padding: 5px;
				background-color: rgba(10, 10, 80, 0.05);
				border-radius: 4px;
				margin-top: 5px;
			"
			v-for="(dataVal, index) in dataValue"
			:key="index"
		>
			<div class="del-btn" size="mini" circle @click="handleDelGroup(index)">
				<i class="el-icon-minus"></i>
			</div>
			<xh-form
				size="mini"
				class="min-xh-form"
				:configs="[{ fields: getFields(dataVal) }]"
				@value-change="(data) => handleValueChange(data, dataVal)"
			/>
		</div>
	</div>
</template>

<script>
import arrayMixin from './arrayMixin'
const XhForm = () => import('./XhForm.vue')
import decorateField from './formFn/decorateField'

export default {
	inject: {
		XhForm: 'XhForm'
	},
	mounted() {
		this.fields = this.item.append.map(decorateField)
	},
	components: {
		XhForm
	},
	computed: {},
	mixins: [arrayMixin],
	props: {
		// 操作类型
		action: {
			type: Object,
			default: () => {
				return {
					type: 'save',
					id: '',
					data: {} //编辑所需信息
				}
			}
		},
		// CRM类型
		crmType: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			fields: [],
			selection: [], // 数组选中
			loading: false,

			errorTd: [] // 标红单元格
		}
	},
	methods: {
		getFields(dataVal) {
			const fields = []
			this.item.append.forEach((source) => {
				const _source = Object.assign({}, source)
				_source.value = dataVal[source.fieldName]
				fields.push(_source)
			})
			return fields
		},
		handleAddGroup() {
			const newVal = {}
			for (let field of this.fields) {
				newVal[field.key] = field.value
			}
			this.dataValue.push(newVal)
			this.valueChange(this.dataValue)
		},
		handleDelGroup(index) {
			this.dataValue.splice(index, 1)
			this.valueChange(this.dataValue)
		},
		handleValueChange(data, dataVal) {
			dataVal[data.item.key] = data.value
			this.valueChange(this.dataValue)
		},
		validate() {
			let errorfieldnames = []
			this.errorTd = []
			this.fields.forEach((field) => {
				if (field.data.isNull == 1) {
					this.dataValue.forEach((row) => {
						if (!row[field.key]) {
							errorfieldnames.push(field.data.name)
							this.errorTd.push({ row, field })
						}
					})
				}
			})
			if (errorfieldnames.length) {
				return {
					result: false,
					message: errorfieldnames.join('/') + '为必填项'
				}
			}
			return {
				result: true
			}
		}
	},
	computed: {
		headTools() {
			return this.item.data.tools
		}
	}
}
</script>

<style lang="scss" scoped>
$color: #666;
$require: #f56c6c;
.xh-table-cont {
	position: relative;
	margin-top: -25px;
}
.xh-tools {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 25px;
	padding-right: 3px;
}
.add-btn {
	cursor: pointer;
	width: 17px;
	height: 17px;
	border-radius: 99px;
	background-color: #5f88ff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	float: right;
	font-size: 12px;
}
.del-btn {
	cursor: pointer;
	width: 17px;
	height: 17px;
	border-radius: 99px;
	background-color: rgb(239, 108, 85);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	float: right;
	font-size: 12px;
	position: absolute;
	top: 3px;
	right: 3px;
}
.x-smoll-table__lb-i {
	position: relative;
	font-size: 13px;
	color: $color;
	padding: 3px 0;
	&.rqd {
		padding-left: 8px;
		&::before {
			content: '*';
			color: $require;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}
.errorTd ::v-deep {
	.el-input__inner,
	.el-input__inner:focus {
		border-color: #f56c6c !important;
	}
}
::v-deep {
	.xh-table {
		.el-table--group,
		.el-table--border,
		th,
		td,
		.el-input__inner,
		.el-input__inner:focus {
			border-color: #ddd !important;
		}
		.el-table__header th {
			padding: 0;
		}
		.el-table__body td {
			padding: 5px 0;
		}
	}
}

.min-xh-form ::v-deep {
}
</style>
